<template>
  <div id="app" >
    <Watermark />
      <router-view v-if="isRouterAlive" />
	  <div class="draggable" draggable="true" @dragend="icoDragEnd"  @click="toggleIframe">
		  <img src="./assets/img/xi.png"  alt="AI助手">
	  </div>
	  <div class="xizhongtai" v-if="showIframe" draggable="true" @dragstart="dragStart" @dragend="dragEnd">
			<div class="xiheader">
				<div class="btndiv">
					<button @click="largeIframe"><img src="./assets/img/放大.png" alt="" style="width: 14px; height: 14px;"></button>
					<button @click="toggleIframe"><img src="./assets/img/关闭.png" alt="" style="width: 14px; height: 14px;"></button>
				</div>
				
			</div>
		  <iframe :src="iframeSrc" class="xiframe"
		  allow="accelerometer; autoplay; clipboard-write; encrypted-media *; gyroscope; picture-in-picture;microphone *;"allowFullScreen></iframe>
	  </div>
  </div>
</template>

<script>
import Watermark from './components/Watermark.vue';
import { getNavbar } from "@/api/index";
export default {
  name: "app",
  provide() {
    return {
      reload: this.reload,
    };
  },
  components: {
    Watermark,
  },
  data() {
    return {
		isRouterAlive: true,
		workNum :'',
		showIframe: false,
		iframeSrc: 'http://www.bono.com.cn/Home/Default.htm' ,// 你想加载的iframe地址
		isLarge : false,
		
		dragging: false, // 标记是否正在拖动
		initialX: 0, // 初始X坐标
		initialY: 0, // 初始Y坐标
    };
  },

  beforeDestroy() {
    // 移除事件监听器，避免内存泄漏
    window.removeEventListener('beforeunload', this.clearSessionData);
  },
  methods: {			
    clearSessionData() {
      sessionStorage.clear();  // 清除所有 sessionStorage 数据
      // 或者
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
	
	
	
	/**
	 * add 20251108 拖动图标
	 */
	icoDragEnd(event) {
	  const el = document.querySelector('.draggable'); // 获取元素引用
	  el.style.left = event.clientX+'px'; // 设置新的左侧位置
	  el.style.top = event.clientY+'px'; // 设置新的顶部位置
	  if(event.clientX>750){
		  el.style.left='96%';
	  }else{
		  el.style.left= '1%';
	  }
	},
	
	dragStart(event) {
	  this.dragging = true;
	  this.initialX = event.clientX - this.getLeft(); // 获取相对于左侧的距离
	  this.initialY = event.clientY - this.getTop(); // 获取相对于顶部的距离
	  // document.addEventListener('mousemove', this.draggingHandler); // 添加鼠标移动事件监听器
	  // document.addEventListener('mouseup', this.dragEnd); // 添加鼠标松开事件监听器，用以结束拖动
	},
	dragEnd(event) {
	  this.dragging = false; // 设置拖动结束
	  //document.removeEventListener('mousemove', this.draggingHandler); // 移除鼠标移动事件监听器
	  this.draggingHandler(event);
	},
	draggingHandler(event) {
	  if (!this.dragging) {
		const x = event.clientX - this.initialX; // 计算新的X坐标
		const y = event.clientY - this.initialY; // 计算新的Y坐标
		const el = document.querySelector('.xizhongtai'); // 获取元素引用
		el.style.left = x +'px'; // 设置新的左侧位置
		el.style.top = y+'px'; // 设置新的顶部位置
	  }
	},
	getLeft() {
	  const el = document.querySelector('.xizhongtai'); // 获取元素引用
	  const style = window.getComputedStyle(el); // 获取元素样式信息
	  return parseInt(style.left, 10); // 返回左侧位置（转换为数字）
	},
	getTop() {
	  const el = document.querySelector('.xizhongtai'); // 获取元素引用
	  const style = window.getComputedStyle(el); // 获取元素样式信息
	  return parseInt(style.top, 10); // 返回顶部位置（转换为数字）
	},
	largeIframe(){
		if(!this.isLarge){
			const el = document.querySelector('.xizhongtai'); // 获取元素引用
			
			el.style.right = '0px';
			el.style.top = '0px';
			el.style.width = '100%';
			el.style.height = '100%';
			this.isLarge = true;
		}else{
			const el = document.querySelector('.xizhongtai'); // 获取元素引用
			el.style.width = '800px';
			el.style.height = '477.8px';
			el.style.right = '80px';
			el.style.top = '80px';
			this.isLarge = false;
		}
	
		
	},
	toggleIframe() {
		const str = `userId=` + this.workNum +`&appId=d409c2fd-fbae-4788-870c-8e1e9b71383a`; //  用户id difyAppId 可以继续编入会话变量参数 &foo=a&bar=b...
		const ticket = encodeURIComponent(window.btoa(str)); // 先做base64 再做urlEncoded
		this.iframeSrc = `https://aiagent.baoxiniao.com/#ticket=`+ticket; // 正式环境的baseUrl为 https://aiagent.baoxiniao.com
		console.log(this.iframeSrc)
		this.showIframe = !this.showIframe;
	},
	getUserInfo() {//获取账号信息
	  var param = {
	    sid: window.sid,
	    cmd: "com.bono.portal.getBasicInfo",
	  };
	  getNavbar(param).then((res) => {
	    this.obj = res.data;
	    this.workNum = res.data.userNo;
	  });
	 
	}
  },
  created() {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    }),
      function iframeLoad() {
        document.getElementById("iframe").height = 0;
        document.getElementById("iframe").height =
          document.getElementById(
            "iframe"
          ).contentWindow.document.body.scrollHeight;
      };
	this.getUserInfo();
  },

 
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  position: relative; /* 为了让水印绝对定位 */

}
// 自定义进度条颜色
#nprogress .bar {
  background: #f811b2 !important; //自定义颜色
}
 .draggable{
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: rgb(255, 255, 255);
	cursor: pointer;
	transition: 0s;//移动时间
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;
	left: 96%;
	top: 92%;
	border-radius: 50%;
	z-index: 1000;
	user-select: none;
	touch-action: none;
	display: flex; justify-content: center;
	align-items: center;
	overflow: hidden;
	animation: auto ease 0s 1 normal none running none;
	img{
		 width: 85%; 
		 height: 85%; 
		 border-radius: 50%; 
		 user-select: none; 
		 pointer-events: none;
	}
}
.xizhongtai{
	border-radius: 5px;
	position: fixed;
	cursor: pointer;
	height: 477.8px;
	width : 800px;
	transition: 0s;
	right: 80px;
	top: 80px;
	z-index: 1000;
	user-select: none;
	touch-action: none;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border: 0px solid red;
	.xiheader{
		width: 100%;
		height:5%;
		background-color: #d3dbec;
		border-bottom: 1px solid gainsboro;
		cursor: move;
		.btndiv{
			display: flex;
			float: right;
			button{
				background: none; 
				border: none; 
				cursor: pointer; 
				font-size: 30px; 
				padding: 0px 8px; 
				height: 24px; 
				display: flex; 
				align-items: center; 
				justify-content: center; 
				touch-action: manipulation;
			}
			button:hover {
				background-color: ghostwhite; /* 鼠标悬浮时的背景色 */
			}
		}
		
	}
	.xiframe{
		width: 100%; 
		height:95%;
		border: 0px solid red;
	}
}
</style>
